In this step you will add a Range to the C1LinearGauge control. The following steps assume you have already added a C1LinearGauge control to the page.
In Source View
To add a Range to the C1LinearGauge control, place your mouse between the <cc1:C1LinearGauge> </<cc1:C1LinearGauge> tags, and add the following markup:
To write code in Source View
<Ranges>
<cc1:GaugelRange StartValue="20" EndValue="80" StartDistance="0.85" EndDistance="0.85" StartWidth="0.25" EndWidth="0.5">
</cc1:GaugelRange>
</Ranges>
To set the position of the Range, set the “StartValue“, “EndValue“, “StartDistance“, “EndDistance“, “StartWidth“ and “EndWidth“ as per your choice.
In Code
To add Ranges to the C1LinearGauge control, add the following code to the Page_Load event:
To write the code in Visual Basic:
| Visual Basic |
Copy Code
|
|---|---|
| ' create a new Range object Dim Range1 As NewC1.Web.Wijmo.Controls.C1Gauge.GaugelRange() ' set the Start and End Distance Range1.StartDistance = 0.85 Range1.EndDistance = 0.85 ' set the Start and End Value Range1.StartValue = 20 Range1.EndValue = 80 ' set the Start and End Width Range1.StartWidth = 0.25 Range1.EndWidth = 0.5 ' add the Range to the C1LinearGauge control C1LinearGauge1.Ranges.Add(Range1) |
|
To write the code in C#:
| C# |
Copy Code
|
|---|---|
| // create a new Range object C1.Web.Wijmo.Controls.C1Gauge.GaugelRange Range1 = new C1.Web.Wijmo.Controls.C1Gauge.GaugelRange() ; // set the Start and End Distance Range1.StartDistance = 0.85; Range1.EndDistance = 0.85; // set the Start and End Value Range1.StartValue = 20; Range1.EndValue = 80; // set the Start and End Width Range1.StartWidth = 0.25; Range1.EndWidth = 0.5; // add the Range to the C1LinearGauge control C1LinearGauge1.Ranges.Add(Range1); |
|
What You've Accomplished
When you run your application, observe that your gauge contains a Range and the gauge appears as shown in the following image:
